<template>
  <div>
    <h1>报表统计图</h1>
    
    <!-- 下拉选择器 -->
    <select v-model="selectedChart" style="margin-bottom: 20px;">
      <option value="bar">房源出租率</option>
      <option value="line">租金收入</option>
      <option value="radar">用户活跃度</option>
      <option value="scatter">房源分布</option>
    </select>

    <!-- 统计图容器 -->
    <div class="chart-container">
      <div v-show="selectedChart === 'bar'">  
        <h2>房源出租率</h2>
        <div ref="barChart" style="width: 600px; height: 400px;"></div>
      </div>
      <div v-show="selectedChart === 'line'">  
        <h2>租金收入</h2>
        <div ref="lineChart" style="width: 600px; height: 400px;"></div>
      </div>
      <div v-show="selectedChart === 'radar'">  
        <h2>用户活跃度</h2>
        <div ref="radarChart" style="width: 600px; height: 400px;"></div>
      </div>
      <div v-show="selectedChart === 'scatter'">  
        <h2>房源分布</h2>
        <div ref="scatterChart" style="width: 600px; height: 400px;"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted, nextTick } from 'vue';
import * as echarts from 'echarts';

const barChart = ref<HTMLElement | null>(null);
const lineChart = ref<HTMLElement | null>(null);
const radarChart = ref<HTMLElement | null>(null);
const scatterChart = ref<HTMLElement | null>(null);
const selectedChart = ref('bar'); // 默认显示第一个图表

let barChartInstance: echarts.ECharts | null = null;
let lineChartInstance: echarts.ECharts | null = null;
let radarChartInstance: echarts.ECharts | null = null;
let scatterChartInstance: echarts.ECharts | null = null;
// 初始化图表
const initBarChart = () => {
  if (barChart.value) {
    if (barChartInstance) barChartInstance.dispose(); // 销毁旧实例
    barChartInstance = echarts.init(barChart.value);
    barChartInstance.setOption({
      title: { text: '房源出租率' },
      tooltip: {},
      xAxis: { data: ['区域A', '区域B', '区域C'] },
      yAxis: {},
      series: [
        { name: '已出租', type: 'bar', data: [20, 30, 15] },
        { name: '未出租', type: 'bar', data: [10, 20, 25] }
      ]
    });
  }
};

const initLineChart = () => {
  if (lineChart.value) {
    if (lineChartInstance) lineChartInstance.dispose(); // 销毁旧实例
    lineChartInstance = echarts.init(lineChart.value);
    lineChartInstance.setOption({
      title: { text: '租金收入' },
      tooltip: {},
      xAxis: { data: ['1月', '2月', '3月', '4月'] },
      yAxis: {},
      series: [{ name: '租金收入', type: 'line', data: [50000, 60000, 55000, 70000] }]
    });
  }
};

const initRadarChart = () => {
  if (radarChart.value) {
    if (radarChartInstance) radarChartInstance.dispose(); // 销毁旧实例
    radarChartInstance = echarts.init(radarChart.value);
    radarChartInstance.setOption({
      title: { text: '用户活跃度' },
      tooltip: {},
      radar: {
        indicator: [
          { name: '周一', max: 40 },
          { name: '周二', max: 40 },
          { name: '周三', max: 40 }
        ]
      },
      series: [{ name: '活跃度', type: 'radar', data: [[10, 15, 20], [20, 25, 30], [30, 35, 40]] }]
    });
  }
};


const initScatterChart = () => {
  if (scatterChart.value) {
    if (scatterChartInstance) scatterChartInstance.dispose();
    scatterChartInstance = echarts.init(scatterChart.value);
    
    // 生成6个城市的随机比例（总和100）
    const cities = ['北京', '石家庄', '呼和浩特', '哈尔滨', '威海', '潍坊'];
    const generateRandomPercentages = () => {
      let total = 100;
      return cities.map(city => {
        const value = city === cities[cities.length-1] ? total : Math.floor(Math.random() * total);
        total -= value;
        return { value, name: city };
      });
    };

    scatterChartInstance.setOption({
      title: { text: '房源分布' },
      tooltip: {
        formatter: '{a} <br/>{b} : {c}套 ({d}%)'
      },
      series: [{
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: generateRandomPercentages(),
        label: {
          show: true,
          formatter: '{b}\n{d}%'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18'
          }
        }
      }]
    });
  }
};
onMounted(() => {
  nextTick(() => {
    initBarChart();
    barChartInstance?.resize();  // 添加resize调用
  });
});

// 补充窗口resize监听
window.addEventListener('resize', () => {
  if (selectedChart.value === 'bar') {
    barChartInstance?.resize();
  }
});
// 监听selectedChart的变化
watch(selectedChart, (newValue) => {
  // 添加nextTick确保DOM更新完成

nextTick(() => {
    switch (newValue) {
      case 'bar':
        initBarChart();
        barChartInstance?.resize(); // 添加resize调用
        break;
      case 'line':
        initLineChart();
        lineChartInstance?.resize();
        break;
      case 'radar':
        initRadarChart();
        radarChartInstance?.resize();
        break;
      case 'scatter':
        initScatterChart();
        scatterChartInstance?.resize();
        break;
    }
  });
});
</script>

<style scoped>
.chart-container {
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
}

h2 {
  margin-bottom: 20px;
}
</style>